<template>
    <view class="guide">
        <view class="guide_head">
             <view>装备鉴别</view>
             <view class="guide_por">
                 <view></view>
                 <view>新手拍摄指南</view>
                 <view></view>
             </view>
             <view>请在自然光纤下拍摄，切勿使用散光灯防止出现色差</view>
        </view>
        <view class="guide_for">
            <view class="guide_list" wx:if="{{guideListOne.showable === 1}}">
                <view class="guide_pd">
                    <view class="guide_h2">{{guideListOne.title}}</view>
                    <view class="guide_jindu">
                        <view class="org"></view>
                        <view></view>
                        <view></view>
                        <view></view>
                    </view>
                    <rich-text nodes="{{htmlShow}}"></rich-text>
                </view>
                <image src="{{guideListOne.image}}"></image>
            </view>
            <!-- <view class="guide_list">
                <view class="guide_pd">
                    <view class="guide_h2">球鞋外观</view>
                    <view class="guide_jindu">
                        <view></view>
                        <view class="org"></view>
                        <view></view>
                        <view></view>
                    </view>
                    <view>拍摄清晰的鞋标字体</view>
                </view>
                <image src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/logo.png"></image>
            </view> -->
                <!--<image src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/logo.png"></image>-->
            </view>
        </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import utils from '@/utils/utils';
    import tip from '@/utils/tip';
    import {
        USER_INFO,USER_SPECICAL_INFO
    } from '@/utils/constant';

    export default class guide extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '新手指南',    // 头部标题
        }
        components = {

        }

        data = {
            guideListOne:{},
            htmlShow:''
        }

        async getGuideList() {
            let self = this;
            api.getContentConfigInfo({
                query: {}
            },"NEWER_GUIDE").then(function(res){
                if (res.data.code == 0) {
                    self.guideListOne = res.data.data[0] ? res.data.data[0] : {
                        content: "",
                        createTime: "",
                        id: "",
                        image: "",
                        showable: 0,
                        title: "",
                        type: "",
                        updateTime: ""
                    };
                    self.htmlShow = self.guideListOne.content.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
                    self.$apply();
                } else {
                    tip.error(res.data.msg)
                }
            });
        }
        onLoad(){
            this.getGuideList()
        }
        methods = {
            htmlEscape(html) {
                var reg = /(&lt;)|(&gt;)|(&amp;)|(&quot;)/g;
                return html.replace(reg, function (match) {
                    switch (match) {
                        case "&lt;":
                            return "<";
                        case "&gt;":
                            return ">"
                        case "&amp;":
                            return "&";
                        case "&quot;":
                            return "\""
                    }
                });

            }
        }
        events = {

        }
    }

</script>
<style lang="less">
    .guide{
        .guide_head{
            text-align: center;
            background: #6e6e6e;
            >view:first-child{
                font-size: 60rpx;
                padding-top: 30rpx;
                color: #fff;
                letter-spacing:4px;
            }
            >view:last-child{
                padding-top: 50rpx;
                padding-bottom: 20rpx;
                color: #fff;
            }
            .guide_por{
                position: relative;
                width: 330rpx;
                margin: 0 auto;
                text-align: center;
                >view{
                    color: #fff;
                    letter-spacing:2px;
                }
                >view:first-child{
                    width: 50rpx;
                    height: 1px;
                    background: #fff;
                    position: absolute;
                    left: 0;
                    top: 25rpx;
                }
                >view:last-child{
                    width: 50rpx;
                    height: 1px;
                    background: #fff;
                    position: absolute;
                    right: 0;
                    top: 25rpx;
                }
            }
        }
        .guide_for{
            .guide_list{
                .guide_pd{
                    padding: 20rpx;
                    background: #fff;
                    .guide_h2{
                        letter-spacing:4px;
                        font-size: 40rpx;
                        color: #000;
                    }
                    .guide_jindu{
                        view{
                            background: #000000;
                            width: 20rpx;
                            height: 8rpx;
                            display: inline-block;
                        }
                        .org{
                            background: #ffb025!important;
                        }
                    }
                    >view:last-child{
                        padding-top:40rpx ;
                    }
                }
                image{
                    width: 100%;
                }
            }


        }
    }
</style>
